<template>
  <div class="criterionId" id="criterionId">
    <div class="criterion-head">
      <span>运维考核准则</span>
    </div>
    <!-- <div style="margin-bottom:15px;margin-left:42px">
			<a-button style="color: #000000cc; background-color: #2c6a60; border-color: #2c6a60;font-weight: 600;letter-spacing: 6px;"
			 @click="build">新建准则</a-button>
    </div>-->
    <div style="border: 1px solid #2c6a60;width:1500px;margin-left: 42px">
      <a-table :columns="columns" :data-source="data" :pagination="false" size="middle">
        <a slot="name" slot-scope="text">{{ text }}</a>
        <span slot="operate" slot-scope="text,record" class="operate-btn">
          <!-- <a class="detail" @click="showModal">详情细则</a> -->
          <a-button
            style="color: #000000cc; background-color: #2c6a60; border-color: #2c6a60;font-weight: 600;letter-spacing: 8px;"
            @click="edit(record)"
          >编辑</a-button>
          <a-button
            @click="alldelete(record.id)"
            type="danger"
            style="margin-left:9px;color: #000000cc; background-color: rgba(149, 74, 69); border-color: rgba(51, 31, 30);font-weight: 600;letter-spacing: 8px;"
          >删除</a-button>
        </span>
      </a-table>
    </div>
    <div class="content-bottom clearfix">
      <div class="page-box">
        <a-pagination
          :show-total="total => `共 ${total} 条记录`"
          v-model="current"
          :total="total"
          :defaultPageSize="size"
          :item-render="itemRender"
          @change="pagechangeFn"
        />
      </div>
    </div>
    <!-- 修改准则 -->
    <a-modal
      :title="title"
      :visible="visibleA"
      :confirm-loading="confirmLoadingA"
      @cancel="handleCancel"
      closable
      :footer="null"
      destroyOnClose
      :maskClosable="false"
    >
      <a-form-model :form="addForm" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <a-form-model-item label="主键">
          <a-input v-model="addForm.id" />
        </a-form-model-item>
        <a-form-model-item label="考核准则">
          <a-input v-model="addForm.criterion" />
        </a-form-model-item>
        <a-form-model-item label="准则总分">
          <a-input v-model="addForm.criterionScore" />
        </a-form-model-item>
        
        
        
      
      </a-form-model>
      <a-row type="flex" justify="end">
        <a-col :span="6">
          <a-button type="primary" @click="confirmSend">确认</a-button>
        </a-col>
        <a-col :span="6">
          <a-button type="primary" @click="cancelBtn">取消</a-button>
        </a-col>
      </a-row>
    </a-modal>
    <!-- <a-modal title="详情细则" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCancel"
		 width="400px" closable :footer="null">
			<div>
				<a-form class="pollutionForm" style="padding: 6px 41px;" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
					<a-row>
						<a-col :span="11" pull="1">
							<a-form-item label="准则名称">
								<a-input style="background-color: #207064; border: 0px solid #2a4341; color: #bebebe;" />
							</a-form-item>
						</a-col>
						<a-col :span="1"></a-col>
						<a-col :span="11">
							<a-form-item label="准则总分">
								<a-input style="background-color: #207064; border: 0px solid #2a4341; color: #bebebe;" />
							</a-form-item>
						</a-col>
						<a-col :span="1"></a-col>
					</a-row>
					<a-row>
						<a-col :span="11" pull="1">
							<a-form-item label="考核细则">
								<a-input style="background-color: #207064; border: 0px solid #2a4341; color: #bebebe;" />
							</a-form-item>
						</a-col>
						<a-col :span="1"></a-col>
						<a-col :span="11">
							<a-form-item label="比分权重">
								<a-input style="background-color: #207064; border: 0px solid #2a4341; color: #bebebe;" />
							</a-form-item>
						</a-col>
						<a-col :span="1"></a-col>
					</a-row>
					<a-row>
						<a-col :span="11" pull="1">
							<a-form-item label="考核细则">
								<a-input style="background-color: #207064; border: 0px solid #2a4341; color: #bebebe;" />
							</a-form-item>
						</a-col>
						<a-col :span="1"></a-col>
						<a-col :span="11">
							<a-form-item label="比分权重">
								<a-input style="background-color: #207064; border: 0px solid #2a4341; color: #bebebe;" />
							</a-form-item>
						</a-col>
						<a-col :span="1">
							<a-button style="margin-left: 12px; margin-top: 5px; font-size: 18px;background-color: #2B3D3D;color: #FFFFFF;">删除</a-button>
						</a-col>
					</a-row>
					<a-row>
						<a-col :span="23">
							<a-button style="float:right;background-color: #2C6A5F;border: none;">增加</a-button>
							<span style="float:right;color:rgb(44, 106, 96); margin-right: 12px; font-size: 20px;">加重比例20/100</span>
						</a-col>
					</a-row>
					<a-row>
						<a-col :span="23" style="margin-top: 115px;margin-left:480px;">
							<a-button style="letter-spacing: 8px;background-color:rgba(44, 106, 95);border:none" @click="showCont" class="sousuobtn btn-style__class">确认</a-button>
						</a-col>
					</a-row>
				</a-form>
			</div>

    </a-modal>-->
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      columns: [],
	  data: [],
	  title:"",
      total: 0,
      visible: false,
      confirmLoading: false,
      id: "",
      criterion: "",
      criterionScore: " ",
      rulesInfos: "",
      current: 1,
      size: 9,
      //弹窗
      visibleA: false,
	  confirmLoadingA: false,
	  //修改数据
      addForm: {
        
      },
      columns: [
        {
          title: "序号",
          key: "id",
          dataIndex: "id",
          align: "center",
          // width: "5%"
        },
        {
          title: "考核准则",
          key: "criterion",
          dataIndex: "criterion",
          align: "center",
          // width: "5%"
        },
        {
          title: "准则总分",
          key: "criterionScore",
          dataIndex: "criterionScore",
          align: "center",
          // width: "5%"
        },
        {
          title: "考核细则",
          key: "rulesInfos",
          dataIndex: "rulesInfos",
          align: "center",
          // width: "25%"
        },
        {
          title: "操作",
          key: "operate",
          width: "25%",
          scopedSlots: {
            customRender: "operate",
          },
          align: "center",
        },
      ],
    };
  },
  methods: {
    //确认
    showCont() {},
    showModal() {
      this.visible = true;
    },
    build() {
      this.visible = true;
    },
    edit(data) {
      this.visibleA = true;
      this.addForm = data;
      this.title = "编辑";
    },
    handleOk(e) {
      this.ModalText = "The modal will be closed after two seconds";
      this.confirmLoading = false;
      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
      }, 2000);
    },
    //取消按钮
    cancelBtn() {
      this.visibleA = false;
	},
	//编辑
	confirmSend(){
    if (this.title == "编辑") {
        console.log(this.addForm);
        var data = this.addForm;
        this.$api.criterionEdit(this.addForm).then((res) => {
          if (res.data.code == 0) {
            this.$message.info("添加成功!");
            this.visibleA = false;
            this.addForm = {};
            this.getdata();
          }
        });
      } else {
        this.$api.criterionEdit(this.addForm).then((res) => {
          if (res.data.data == true) {
            this.visibleA = false;
            this.$message.info("修改成功!");
            this.getdata();
          }
        });
      }
  },
    //删除数据
    alldelete(id) {
      console.log(id);
      this.$api.deleteAll(id).then((res) => {
        if (res.data.data == true) {
          this.$message.info("数据删除成功!");
          this.getdata();
        } else {
          this.$message.info(res.data.errorMessage);
        }
      });
    },
    handleCancel(e) {
      console.log("Clicked cancel button");
      this.visible = false;
    },
    // 分页方法
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a> 上一页 </a>;
      } else if (type === "next") {
        return <a> 下一页 </a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      console.log(page, pageSize);
      this.current = page;
      this.size = page;
      this.getdata();
    },
    //获取数据
    getdata() {
      this.$api.criterionAll(this.current, this.size).then((res) => {
        console.log(res.data);
        if (res.data.code == 0) {
          this.data = res.data.data;
          this.total = res.data.total;
        }
      });
    },
  },
  mounted() {
    this.getdata();
    // this.columns = columns;
    // buildthis.data = data;
  },
};
</script>

<style scoped>
#criterionId .criterion-head {
  font-size: 24px;
  color: #00ffdc;
  padding: 6px 41px;
  line-height: 60px;
}

/* 表边框 */
#criterionId .ant-table-small {
  border: 1px solid #2c6a60;
  border-radius: 3px;
}

#criterionId .ant-table-thead tr th {
  color: #9fb043;
  background: #2c6a60;
  border-bottom: 1px solid #2c6a60;
}

/* 表字体颜色 */
#criterionId .ant-table {
  color: #bebebe;
  font-size: 12;
}

#criterionId .ant-form-item-label > label {
  color: #9fb043;
}

#criterionId
  .ant-table-middle
  > .ant-table-content
  > .ant-table-body
  > table
  > .ant-table-tbody
  > tr
  > td {
  border-bottom: 1px solid #2c6a60;
  font-size: 16px;
  cursor: pointer;
  background-color: transparent;
  line-height: 27px;
}

#criterionId .operate-btn {
  /* display: flex; */
  margin-left: 12px;
  /* justify-content: space-evenly; */
}

.detail {
  color: rgb(44, 106, 96);
  border-color: rgb(44, 106, 96);
  margin-right: 3px;
  font-size: 18px;
}

.content-bottom {
  margin-top: 24px;
  width: 100%;
}

.page-box {
  position: absolute;
  right: 3%;
  bottom: 45px;
}

.ant-pagination {
  color: #babdbd;
}

/* 弹框部分 */
.ant-modal-content {
  background-color: #2b4341;
  margin-top: 52%;
  margin-left: -23%;
  width: 1099px;
  height: 567px;
}

.ant-modal-header {
  background: #2b4341;
  border: none;
}

.ant-modal-footer {
  /* background: transparent; */
  border: none;
}

.ant-modal-title {
  color: #00ffdc;
  font-weight: 500;
  font-size: 24px;
  line-height: 22px;
}

/* Form表单label */

.ant-form-item-label > label {
  color: #9fb043;
  font-size: 18px;
}

/* Form表单label */
.ant-form-item-label > label::after {
  content: "";
}
::v-deep#criterionId .ant-table-tbody > tr > td {
  border-bottom: 1px solid #2c6a60;
}
::v-deep#criterionId .ant-table-align-center {
  border-bottom: 1px solid #2c6a60;
}
</style>
